<template>
	<view class="contain">
		<view class="head">
			<image style="opacity:0.6;" src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k-top.png" mode="aspectFill"></image>
		</view>
		<view class="courselist">
			<!-- 第一行 -->
			<view class="flex flex-row justify-between box">
				<view class="w-[30%] flex justify-center flex-col items-center" @click="goCourse('素描')">
					<image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k1.png" mode="aspectFill"></image>
				</view>
				<view class="w-[30%] flex justify-center flex-col items-center" @click="goCourse('水粉')">
					<image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k2.png" mode="aspectFill"></image>
				</view>
				<view class="w-[30%] flex justify-center flex-col items-center" @click="goCourse('速写')">
					<image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k3.png" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 第二行 -->
			<view class="flex flex-row justify-between box">
				<view class="w-[30%] flex justify-center flex-col items-center" @click="goCourse('户外写生')">
					<image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k4.png" mode="aspectFill"></image>
				</view>
				<view class="w-[30%] flex justify-center flex-col items-center" @click="goCourse('漫画')">
					<image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k5.png" mode="aspectFill"></image>
				</view>
				
				<view class="w-[30%] flex justify-center flex-col items-center" @click="goCourse('水彩')">
					<image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k6.png" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 第三行 -->
			<view class="flex flex-row justify-start box">
				<view class="w-[30%] flex justify-center flex-col items-center" @click="goCourse('油画')">
					<image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k7.png" mode="aspectFill"></image>
				</view>
				<view class="w-[30%] flex justify-center flex-col items-center ml-5" @click="goCourse('创意美术')">
					<image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k8.png" mode="aspectFill"></image>
				</view>
				<view class="w-[30%] flex justify-center flex-col items-center ml-5" @click="goCourse('书法')">
					<image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/k9.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
const goCourse=(title:string)=>{
	uni.$tools.GoUrl("./kcdetail/kcdetail?title="+title);
}
</script>

<style lang='scss' scoped>
	@import "kcjieshao.scss";
</style>